import React, { useReducer } from "react";
// import UseReducerView from "./usereducer/UseReducerView";
// import reducer from "./usereducer/reducer";

import UseContextAndUseReducer from "./content-usereducer/UseContextAndUseReducer";
import MyContext from "./content-usereducer/MyContext";
import reducer from './content-usereducer/reducer.js'
const initState = { count: 0, age: 0, list: [] };
function App() {
  // const [state, dispatch] = useReducer(reducer, { count: 0 })

  const [state, dispatch] = useReducer(reducer, initState)
  return (
    // useReducer()案例
    /*  <div className="App">
       <h1>App组件： </h1>
       <div><b>count: {state.count}</b>  -----
 
         <button type="button" onClick={() => {
           dispatch({ type: 'increment' })
         }}> increment</button>
 
         <button type="button" onClick={() => {
           dispatch({ type: 'decrement' })
         }}> decrement</button>
 
       </div>
 
       <UseReducerView />
     </div> */

    // useContext + useReducer案例：
    <MyContext.Provider value={{ state, dispatch }}>
      <div className="App">
        <h1>App 组件</h1>
        <h3>count: {state.count}</h3>
        <h3>age: {state.age}</h3>
        <hr />
        <UseContextAndUseReducer />
      </div>
    </MyContext.Provider>

  );
}

export default App;
